<template>
  <el-form
    ref="form"
    v-on="$listeners"
    :size="size"
    :inline="false"
    class="demo-form-inline"
    style="border-bottom: 1px solid #efefef; margin-bottom: 30px"
    :model="formData"
    :label-width="labelWidth"
  >
    <el-row :gutter="20">
      <el-col :span="spacing">
        <slot></slot>
      </el-col>
      <el-col :span="customizeType" style="text-align: center">
        <el-form-item label-width="auto">
          <el-button
            plain
            size="mini"
            style="border: 1px solid #971111"
            @click="search"
            ><svg-icon
              icon-class="search_icon"
              style="width: 18px; height: 16px"
            />
            搜索</el-button
          >
          <el-button
            plain
            size="mini"
            style="border: 1px solid #971111"
            @click="reset"
            ><svg-icon
              icon-class="reset_icon"
              style="width: 18px; height: 16px"
            />
            重置</el-button
          >
          <el-button
            plain
            size="mini"
            style="border: 1px solid #971111; width: 120px"
            v-if="customizeType === 8"
            @click="handleCustomize"
            >
            {{ customizeText }}</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "QueryPanel",
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
    size: {
      type: String,
      default: "small",
    },
    labelWidth: {
      type: String,
      default: "80px",
    },
    spacing: {
      type: Number,
      default: 20,
    },
    customizeType: {
      type: Number,
      default: 4
    },
    customizeText: {
      thpe: String,
      default: ''
    }
  },
  methods: {
    search() {
      this.$emit("handleQuery", this.formData);
    },
    reset() {
      this.$refs.form.resetFields();
      this.$emit("reset");
    },
    handleCustomize() {
      this.$emit("handleCustomize");
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-input {
  width: 100%;
}
::v-deep .el-form-item__label {
  font-size: 16px;
  font-weight: 400;
  color: #333333e6;
}
::v-deep .el-form-item__content {
  button {
    width: 84px;
    height: 32px;
    padding-left: 12px;
    span {
      font-size: 16px;
      color: #333333e6;
    }
  }
}
</style>